<template>
	<view class="orderMask">
		<view class="orderMask-content">
			<view class="orderMask-content-img">
				<text>300 <text>元</text> </text>
				<text>奖励已到账！</text>
				<text>1个工作日内入账余额</text>
			</view>
			<view class="orderMask-content-close" @click="close">
				<uni-icons type="close" size="52rpx" color='#ffff'></uni-icons>
			</view>
		</view>
	</view>
</template>
<script>
	export default ({
		name: 'orderMask',
		data() {
			return {}
		},
		methods: {
			close() {
				this.$emit('onClose')
			}
		}
	})
</script>
<style lang="scss" scoped>
	.orderMask {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;

		&-content {
			animation: zoomInDown 1s ease-in 0s 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			&-img {
				width: 697rpx;
				height: 851rpx;
				background: url('../../../static/icon3/grow/ordersMask.png') center center/cover no-repeat;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: top;

				&>text:nth-child(1) {
					margin-top: 518rpx;
					font-size: 40rpx;
					color: rgba(70, 46, 0, 1);
					font-weight: Bold;
					z-index: 88;
					font-weight: bold;
					font-size: 68rpx;
					margin-bottom: 30rpx;

					text {
						font-size: 40rpx !important;
					}
				}

				&>text:nth-child(2) {
					color: rgba(70, 46, 0, 1);
					z-index: 88;
					font-size: 40rpx;
				}

				&>text:nth-child(3) {
					margin-top: 12rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #707070;
					background: #F1F1F5;
					z-index: 88;
					padding: 4rpx 30rpx;
					border-radius: 24rpx;
				}
			}

			&-close {
				font-weight: 500;
				margin-top: 80rpx;
			}
		}
	}

	@keyframes zoomInDown {
		from {
			opacity: 0;
			-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
			transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
			-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
			animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
		}

		60% {
			opacity: 1;
			-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
			transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
			-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
			animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
		}
	}
</style>